<template>

	<view class="vips">
		<view class="navs" :style="{'padding-top':(statusBarTop)+'px'}">
			<uni-icons type="arrowleft" size="24" color="#545454" @click="goBack"></uni-icons>
			<text>我的会员等级</text>
		</view>
		<view class="content">
			<vipinfo :userinfo="userinfo" @openCoup="openCoup"></vipinfo>

			<swiper class="swiper" :circular="true">
				<swiper-item class="single">
					<view class="swiper-item uni-bg-red">
						<view class="level">
							V1黄金会员
						</view>
						<image class="swiper_img" :src="IMGLink+'/my/vip_1.png'"></image>
						<text class="status" v-if="userinfo.user_level_id == '1'">已达成</text>
						<text class="status" v-else>未达成</text>
					</view>
				</swiper-item>
				<swiper-item class="single">
					<view class="swiper-item uni-bg-green">
						<view class="level">
							V2铂金会员
						</view>
						<image class="swiper_img" :src="IMGLink+'/my/vip_2.png'"></image>
						<text class="status">未达成</text>
					</view>
				</swiper-item>
				<swiper-item class="single">
					<view class="swiper-item uni-bg-blue">
						<view class="level">
							V3钻石会员
						</view>
						<image class="swiper_img" :src="IMGLink+'/my/vip_3.png'"></image>
						<text class="status">未达成</text>
					</view>
				</swiper-item>
			</swiper>

			<vipprofit></vipprofit>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	import vipprofit from "../../components/vipProfit.vue";
	import vipinfo from "../../components/vipInfo.vue";
	import {
		vips
	} from "@/api/my/my.js";
	import copyFunc from "@/utils/userCommon.js";
	export default {
		components: {
			vipprofit,
			vipinfo
		},
		data() {
			return {
				IMGLink: this.IMGLink,
				statusBarHeight: 0,
				statusBarTop: 0,
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		onShow() {
			this.$store.dispatch("updateUserInfo");
		},
		onLoad() {
			// 只在微信小程序内获取改数据
			//#ifdef MP-WEIXIN	
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.statusBarHeight = menuButtonInfo.height;
			this.statusBarTop = menuButtonInfo.top;
			//#endif
		},

		methods: {
			// 返回上一页
			goBack() {
				copyFunc.goBack();
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../my.scss";

	.vips {
		box-sizing: border-box;
		height: 522rpx;
		background: linear-gradient(135deg, #FCF3E4 0%, #F4D6A7 100%);
	}

	.navs {
		width: 58%;
		@include flexLayout(center, space-between);
	}

	//#ifdef H5
	.navs {
		padding-top: 44rpx !important;
	}
	//#endif

	.content {
		position: relative;
		top: 90rpx;
		padding: 0 3% 60rpx;

		.swiper {
			height: 280rpx;
			margin: 50rpx 0 40rpx;

			.single {
				width: 87% !important;
				position: relative;

				.level {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					color: #FCD9B3;
					font-size: 56rpx;
					z-index: 11;
				}

				.status {
					position: absolute;
					bottom: 18rpx;
					left: 44rpx;
					color: #503808;
					font-size: 24rpx;
				}
			}

			.swiper_img {
				width: 96%;
				height: 280rpx;
			}
		}
	}
</style>
